
$(function(){
    var fileNumLimit = 20; //限制上传数量
    var imgId = 1; // 图片id
    var nowImgs = []; // 记录当前所有的图片
    var nowImgNum = 0;
    function createHtml(actualImg, showImg) {
		var img = {
			id : imgId,
			actualImg : actualImg,
			showImg : showImg
		};
		nowImgs.push(img);

		var htmlInput = "<input type=\"hidden\" name=\"goodsPhotos\" value=\"" + actualImg + "\" />" +
				"<input type=\"hidden\" name=\"goodsPhotoIds\" value=\"\" />";
		var html = "<li style=\"display: list-item;\" draggable=\"true\" data-index=\"0\" class=\"img_box\">"
				+ "<div style=\"height:120px\"><img height=\"100%\"  src=\"" + showImg + "\"></div>"
				+ "<div class=\"img_cover\"></div>"
				+ "<div class=\"toolbar_wrap\" style=\"display: none;\">"
				+ "<div class=\"opacity\"></div>"
				+ "<div class=\"toolbar\">"
				+ "<a href=\"javascript:;\" style=\"display:none;\" class=\"edit\"></a> <a href=\"javascript:;\""
				+ " class=\"delete delete-image\" fileid=\"\" imgid=\"" + imgId + "\" fsimg=\"" + actualImg + "\"></a>"
				+ "</div>" + htmlInput + "</div>"
				+ "</li>";
		
		$("div.img_list").append(html);

		imgId++;
	}
    
  //选择文件
    $("#file").on("change", "input[type='file']", function() {
    	// 如果数量等于限制数量
        console.log('列队之前' + nowImgNum)
		if (nowImgNum >= fileNumLimit) {
			alert("超出限制上传数量 " + fileNumLimit);
			return false;
		}
        var filePath = $(this).val();
        var fileTypes = "gif,jpg,jpeg,bmp,png" ;
        var fileType = filePath.substring(filePath.lastIndexOf(".")+1,filePath.length);
        //设置上传文件类型
        if (fileTypes.indexOf(fileType) != -1) {
            //上传文件
            $.ajaxFileUpload({
                url: path + '/product/goods/upload',
                data:{
                	subFolder: 'goods'
                },
                secureuri: false,
                fileElementId: 'btnfile',
                dataType: 'json',
                success: function(data, status) {
                    //获取上传文件路径
                    if(data.success){
                    	var src = data.message ;
                    	var show = path + src ;
                    	if(src.indexOf("http") == 0){
                    		show = src ;
                    	}
                    	createHtml(src, show);
                    	console.log('添加到列队之前：' + nowImgNum)
            			nowImgNum++;
                        console.log('添加到列队之后：' + nowImgNum)
                    } else {
                    	alert(data.message);
                    }
                },
                error: function(data, status, e) {
                    alert("上传出错："+e);
                }
            });
        } else {
            alert("请选择正确的文件格式！");
            return false;
        }
    });
    
 // $(document).on 这种方式绑定事件 可以对后添加的html元素生效
	$(document).on("click", ".delete-image",function() {
	    console.log('删除之前：' + nowImgNum)
        nowImgNum = nowImgNum < 1 ? 0 : nowImgNum - 1;
        console.log('删除之后：' + nowImgNum)
		var $this = $(this);
		var $liItem = $this.parent().parent().parent();
		var fileid = $this.attr("fileid");
		var fsImg = $this.attr("fsimg");
		var imgId = $this.attr("imgid");
		var delIndex;
		for ( var index in nowImgs) {
			var img = nowImgs[index];
			if (img.id == imgId) {
				delIndex = index;
			}
		}
		// 如果有，则删除
		if (delIndex) {
			var endIndex = delIndex;
			if (endIndex == 0) {
				endIndex = endIndex + 1;
			}
			nowImgs.splice(delIndex, endIndex);
		}
		
		confirm("确认要删除吗？", function(result){
	       	if(result){
	       		ajaxReq(path + "/product/goods/deletePhoto?photoId="+ fileid +"&file="+ fsImg, function(){
	       			$liItem.remove(); //刷新列表
	       		});
	       	}
	       });

//		$(".delete-imgs").append("<input type=\"hidden\" name=\"del_pic\" value=\"" + fsImg + "\" />");

		//通过html来判断是否有这个元素 有就是还有图片 不隐藏封面logo
		if (!$(".toolbar").html()) {
			$(".first_icon").hide();
		}
	})

	// 上传的文件鼠标移入事件
	$(document).on("mouseenter", ".img_box", function() {
		var $this = $(this);
		$this.addClass("img_box_hover");
		$this.find(".toolbar_wrap").show();
	});

	// 上传的文件鼠标移出事件
	$(document).on("mouseleave", ".img_box", function() {
		var $this = $(this);
		$this.removeClass("img_box_hover");
		$this.find(".toolbar_wrap").hide();
	});

	// 上传文件按钮鼠标移入
	$(document).on("mouseenter", ".localUpload", function() {
		$(this).addClass("local_hover");
	});

	// 上传文件按钮鼠标移出
	$(document).on("mouseleave", ".localUpload", function() {
		$(this).removeClass("local_hover");
	});
});